<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="incloude/common::common_header(~{::meta},~{::link})"></head>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{~/plugins/ztree/css/metroStyle/metroStyle.css}" media="all">
</head>

<body>

<div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-sm12 layui-col-md3 layui-col-lg2">
                <div class="layui-card">
                    <div class="layui-card-body mini-bar">
                        <div>
                            <ul id="tree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-sm12 layui-col-md12 layui-col-lg10">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">
                                    <a th:href="${adminPath} + '/user/list'">用户列表</a>
                                </li>
                                <li>
                                    <a th:href="${adminPath} + '/user/form'">用户添加</a>
                                </li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">

                                <!--内容-->
                                <div class="layui-card-body">
                                    <div class="table-reload-btn" style="margin-bottom: 10px;">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label"> 姓名：</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name="name" id="name" class="layui-input" autocomplete="off">
                                                </div>
                                            </div>

                                            <div class="layui-inline">
                                                <button class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button>
                                                <button class="layui-btn" data-type="reset">重置</button>
                                            </div>
                                        </div>
                                    </div>

                                    <table class="layui-hide" id="table" lay-filter="table"></table>

                                    <script type="text/html" id="table-operate-bar">
                                        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                                        <a class="layui-btn layui-btn-xs" lay-event="resetPwd"><i class="layui-icon layui-icon-survey"></i>重置密码</a>
                                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                                    </script>

                                    <script type="text/html" id="statusTpl">
                                        <input type="checkbox" lay-filter="status" value="{{d.id}}"
                                               lay-skin="switch" lay-text="启用|禁用" {{d.status=='0'?'checked':''}} />
                                    </script>

                                </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div th:replace="incloude/common::common_js"></div>
<div th:replace="incloude/common::layui_config"></div>
<script th:src="@{~/plugins/ztree/js/jquery.ztree.all.min.js}"></script>

<script th:inline="javascript">
    /*后台返回数据*/
    var zNodes =[[${list}]];
    //记录部门树中选中的部门id
    var officeId;
</script>

<script type="text/javascript" th:inline="none">
    layui.use(['form','layer','table'], function(){
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var User = { TableId:"table" };

        //删除方法
        User.Delete = function(data){
            layer.confirm('确定删除数据吗？', function(index){
                $.ajax({
                    url: adminPath + "/user/delete",
                    data: { "id": data.id },
                    success: function(res){
                        if(res.code === 0){
                            table.reload(User.TableId);
                        }else{ layer.msg('删除失败'); }
                    }
                });
                layer.close(index);
            });
        };

        //初始化表格列
        User.InitColumn = function(){
            return [[
                {type: 'numbers', title: '序号'}
                ,{field:'username', title: '账号'}
                ,{field:'name', title: '姓名'}
                ,{field:'', title: '所属部门', templet:'<div>{{d.office.name}}</div>'}
                ,{field:'mobile', title: '手机号' }
                ,{field:'status', title: '状态', templet: '#statusTpl' }
                ,{align:'center', title: '操作', fixed: 'right', width:'20%' , toolbar: '#table-operate-bar'}
            ]];
        };

        table.render({
            elem: "#" + User.TableId,
            url: adminPath + '/user/findByPage',
            cols: User.InitColumn(),
            cellMinWidth: 100,
            request: {
                pageName: 'pageNo',
                limitName: 'pageSize'
            },
            page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                reloadTable();
            },
            reset: function(){
                $('#name').val('');
                officeId = '';
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                treeObj.cancelSelectedNode();
                reloadTable();
            }
        };

        //监听行工具事件
        table.on('tool('+ User.TableId +')', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                User.Delete(data);
            } else if(obj.event === 'edit'){
                window.location.href = adminPath + '/user/form?id='+data.id;
            } else if(obj.event === 'resetPwd'){
                resetPwd(obj);
            }
        });

        //监听修改switch
        form.on('switch', function(obj) {
            var id = obj.elem.value;
            var status = obj.elem.checked ? '0' : '1';
            $.ajax({
                url: adminPath + "/user/changeStatus",
                data: { "id": id, "status":status },
                success: function(res){
                    if(res.code === 0){
                        layer.msg('操作成功');
                    }else{
                        layer.msg('操作失败');
                    }
                }
            });

        });

        $('.table-reload-btn .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //开始初始化左侧部门树/////////////////////////////////////////////////
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "pid"
                }
            },
            callback: {
                onClick: nodeClick
            }
        };

        /*初始化zTree*/
        $(document).ready(function(){
            var treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
            treeObj.expandAll(true);//默认展开所有
        });

        /**
         * 部门树节点点击事件，进行表格刷新
         * @param treeId
         * @param treeNode
         */
        function nodeClick(event, treeId, treeNode){
            officeId = treeNode.id;
            reloadTable();
        }

        //重载表格
        function reloadTable() {
            var queryData = {};
            queryData['officeId'] = officeId;
            queryData['name'] = $("#name").val();
            table.reload(User.TableId, {page: {curr: 1},where: queryData});
        }

        //重置密码
        function resetPwd(obj) {
            var data = obj.data;
            layer.confirm('确定将密码重置为123456吗？', function(index){
                $.ajax({
                    url: adminPath + "/user/resetPwd",
                    data: { "id": data.id },
                    success: function(res){
                        if(res.code === 0){
                            layer.msg('重置成功');
                            reloadTable();
                        }else{
                            layer.msg('重置失败');
                        }
                    }
                });
                layer.close(index);
            });
        }

    });

</script>

</body>

</html>